<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<meta name="description" content="">
	<meta name="author" content="">
	<!--<link rel="icon" href="../../favicon.ico">-->

	<title>Sorting Component - FooTable</title>

	<!-- Bootstrap core CSS -->
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">

	<!-- Prism -->
	<link href="../css/prism.css" rel="stylesheet">

	<!-- FooTable Bootstrap CSS -->
	<link href="../../compiled/footable.bootstrap.min.css" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="../css/docs.css" rel="stylesheet">

	<script src="../js/demo-rows.js"></script>
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body class="docs">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="../../index.html" class="navbar-brand">FooTable</a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li><a href="../getting-started.html">Getting started</a></li>
				<li class="dropdown active">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Components <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="editing.html">Editing</a></li>
						<li><a href="filtering.html">Filtering</a></li>
						<li><a href="paging.html">Paging</a></li>
						<li><a>Sorting</a></li>
						<li><a href="state.html">State</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="../jsdocs/index.html" target="_blank">JSDocs</a></li>
				<li><a href="https://github.com/fooplugins/FooTable" target="_blank">GitHub</a></li>
			</ul>
		</div><!--/.nav-collapse -->
	</div>
</nav>

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
	<div class="container">
		<h1>Sorting</h1>
		<h2>Sort rows by columns.</h2>
	</div>
</div>

<div class="container">
	<!-- General -->
	<div class="docs-section">
		<p class="lead">The sorting component allows you to quickly and easily sort all rows in a table using a specific column to determine the resulting order.</p>
		<div class="callout callout-info">
			<h4>Notes</h4>
			<ul>
				<li>This component relies on a columns <a href="../getting-started.html#column-type"><code>type</code></a> option being correctly set.</li>
				<li>See the <a href="../getting-started.html#examples">Getting started - Examples</a> section for examples of this component.</li>
			</ul>
		</div>
	</div>

	<!-- Options -->
	<div class="docs-section">
		<h1 class="page-header anchored"><span id="options" class="anchor">&nbsp;</span>Options</h1>
		<p class="lead">The below lists all the options for the sorting component, these are available in addition to the <a href="../getting-started.html#options">core options</a>.</p>

		<div class="list-group list-group-detailed">
			<h3 class="list-group-header">General options</h3>

			<!-- enabled -->
			<a href="#enabled" class="list-group-item anchored">
				<span id="enabled" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">enabled <small>boolean</small></h4>
				<p class="list-group-item-text">Whether or not the component is enabled.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">
					<div class="examples">

						<div class="example default">
							<p><code>false</code></p>
							<p>By default this component is disabled, no UI or features of this component will be available.</p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table data-sorting=&quot;true&quot;&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;sorting&quot;: {
			&quot;enabled&quot;: true
		}
	});
});</code></pre>

					</div>

				</div>

			</div>

		</div>

		<div class="list-group list-group-detailed child">
			<h3 class="list-group-header">Column options</h3>

			<!-- sortValue -->
			<a href="#sortValue" class="list-group-item anchored">
				<span id="sortValue" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">sortValue <small>function</small></h4>
				<p class="list-group-item-text">The function used to retrieve the sort value for a cell.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">
					<p>
						To improve the performance of the component all cells provide a value to be used during sorting operations.
					</p>

					<div class="examples">

						<div class="example default">
							<p><code>null</code></p>
							<p>By default the column will use its <a href="../getting-started.html#column-type"><code>type</code></a>s sortValue function.</p>
						</div>
						<div class="example returns">
							<p><code>*</code></p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply the function through data attributes it must be defined as a named JavaScript function with the name supplied as the attribute value.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>function mySortValue(valueOrElement){
	if (FooTable.is.element(valueOrElement) || FooTable.is.jq(valueOrElement)) return jQuery(valueOrElement).data(&#39;sortValue&#39;) || this.parser(valueOrElement);
	if (FooTable.is.hash(valueOrElement) &amp;&amp; FooTable.is.hash(valueOrElement.options)){
		if (FooTable.is.string(valueOrElement.options.sortValue)) return valueOrElement.options.sortValue;
		if (FooTable.is.defined(valueOrElement.value)) valueOrElement = valueOrElement.value;
	}
	if (FooTable.is.defined(valueOrElement) &amp;&amp; valueOrElement != null) return valueOrElement;
	return null;
}</code></pre>
						<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th data-sort-value=&quot;mySortValue&quot;&gt;...&lt;/th&gt;
			...
		&lt;/tr&gt;
	&lt;/thead&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;columns&quot;: [{
			&quot;sortValue&quot;: function(valueOrElement){
				if (FooTable.is.element(valueOrElement) || FooTable.is.jq(valueOrElement)) return jQuery(valueOrElement).data(&#39;sortValue&#39;) || this.parser(valueOrElement);
				if (FooTable.is.hash(valueOrElement) &amp;&amp; FooTable.is.hash(valueOrElement.options)){
					if (FooTable.is.string(valueOrElement.options.sortValue)) return valueOrElement.options.sortValue;
					if (FooTable.is.defined(valueOrElement.value)) valueOrElement = valueOrElement.value;
				}
				if (FooTable.is.defined(valueOrElement) &amp;&amp; valueOrElement != null) return valueOrElement;
				return null;
			}
		},{
			...
		}]
	});
});</code></pre>

					</div>

					<div class="callout callout-info">
						<h4>Note</h4>
						<p>The first argument (<code>valueOrElement</code>) is either the <code>td</code> element, the jQuery wrapper around the <code>td</code> element or a value that needs to be parsed.</p>
					</div>

				</div>

			</div>

			<!-- sortable -->
			<a href="#sortable" class="list-group-item anchored">
				<span id="sortable" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">sortable <small>boolean</small></h4>
				<p class="list-group-item-text">Whether or not the column can be sorted.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

					<div class="examples">

						<div class="example default">
							<p><code>true</code></p>
							<p>All columns can be sorted by default.</p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the cell element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th data-sortable=&quot;false&quot;&gt;...&lt;/th&gt;
			...
		&lt;/tr&gt;
	&lt;/thead&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;columns&quot;: [{
			&quot;sortable&quot;: false
		},{
			...
		}]
	});
});</code></pre>

					</div>

				</div>

			</div>

			<!-- sorted -->
			<a href="#sorted" class="list-group-item anchored">
				<span id="sorted" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">sorted <small>boolean</small></h4>
				<p class="list-group-item-text">Whether or not the column is currently sorted.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

					<div class="examples">

						<div class="example default">
							<p><code>false</code></p>
							<p>When set to <code>true</code> the component will sort by this column once initialized.</p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the cell element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th data-sorted=&quot;true&quot;&gt;...&lt;/th&gt;
			...
		&lt;/tr&gt;
	&lt;/thead&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;columns&quot;: [{
			&quot;sorted&quot;: true
		},{
			...
		}]
	});
});</code></pre>

					</div>

				</div>

			</div>

			<!-- direction -->
			<a href="#direction" class="list-group-item anchored">
				<span id="direction" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">direction <small>string</small></h4>
				<p class="list-group-item-text">A string specifying the direction if the column is sorted.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">
					<p>
						When using the <a href="#sorted"><code>sorted</code></a> option this allows you to specify the direction the column is sorted.
						This only supports two values; <code>"ASC"</code> and <code>"DESC"</code>.
					</p>

					<div class="examples">

						<div class="example default">
							<p><code>"ASC"</code></p>
							<p>The only other supported value for this option is <code>"DESC"</code>.</p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the cell element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th data-sorted=&quot;true&quot; data-direction=&quot;DESC&quot;&gt;...&lt;/th&gt;
			...
		&lt;/tr&gt;
	&lt;/thead&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;columns&quot;: [{
			&quot;sorted&quot;: true,
			&quot;direction&quot;: &quot;DESC&quot;
		},{
			...
		}]
	});
});</code></pre>

					</div>

				</div>

			</div>

		</div>

		<div class="list-group list-group-detailed grand-child">
			<h3 class="list-group-header">Cell options</h3>

			<!-- sortValue -->
			<a href="#cell-sortValue" class="list-group-item anchored">
				<span id="cell-sortValue" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">sortValue <small>*</small></h4>
				<p class="list-group-item-text">The value used by the component to perform sorting operations.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

					<div class="examples">

						<div class="example default">
							<p><code>""</code></p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>td</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;tr&gt;
		&lt;td data-sort-value=&quot;My Sort Value&quot;&gt;...&lt;/td&gt;
		...
	&lt;/tr&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;rows&quot;: [{
			&quot;id&quot;: {
				&quot;options&quot;: {
					&quot;sortValue&quot;: &quot;My Sort Value&quot;
				},
				&quot;value&quot;: ...
			}
		},{
			...
		}]
	});
});</code></pre>

					</div>

					<div class="callout callout-info">
						<h4>Note</h4>
						<p>If no sort value is supplied for a cell the result of the cells default <code>parse</code> method will be used.</p>
					</div>

				</div>

			</div>

		</div>

	</div>

</div> <!-- /container -->

<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../js/prism.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/docs.js"></script>
<!-- Add in any FooTable dependencies we may need -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<!-- Add in FooTable itself -->
<script src="../../compiled/footable.js"></script>
<!-- Initialize FooTable -->
<script>
	jQuery(function($){
		$('#sorting-example-1').footable();
	});
</script>
</body>
</html>